<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            width: 100%;
            height: 142px;
            background-color: #fff;
            position: relative;
        }
        .qqMusic_logo{
            width: 170px;
            height: 46px;
            float: left;
            line-height: 90px;
            display: block;

        }
        img{
            border: 0;
        }
        .header_top{
            position: absolute;
            left: 198px;
            top: 0;
            height: 90px;
            display: block;

        }
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .top_nav,.top_nave{
            float: left;
            display: block;
            padding: 0 20px;
            line-height: 90px;
            height: 90px;
            text-align: center;
            font-size: 18px;
        }
        .top_nav_link_1{
            background-color: #31c27c;
            color: #fff;
            line-height: 90px;
            display: block;
            width: 54px;
            padding-left: 20px;
            padding-right: 20px;
        }
        a{
            text-decoration: none;
        }
        /*超链接设置*/
        .top_nave>a:link,.top_nave>a:visited{
            color: black;
        }
        .top_nave>a:hover{
            background-color: #fff;
            color: #31c27c;
        }
        .top_nav__mark{
            width: 37px;
            height: 14px;
            position: absolute;
            margin-top: 18px;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div class="header">
                <div class="section">
                    <h1 class="qqMusic"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000"
                                             class="qqMusic_logo" alt=""></h1>
                    <ul class="header_top">
                        <li class="top_nav"><a class="top_nav_link_1" title="音乐馆" href="">音乐馆</a></li>
                        <li class="top_nave"><a class="top_nav__link_2" title="我的音乐" href="https://y.qq.com/n/ryqq/profile">我的音乐</a></li>
                        <li class="top_nave"><a href="//y.qq.com/download/index.html" class="top_nav__link_3" title="客户端">客户端</a>
                            <img src="//y.qq.com/mediastyle/yqq/extra/mark_1.png?max_age=2592000" class="top_nav__mark" alt="抢特权">
                            <div class="popup_data_detail client_privilege">
                                <div class="popup_data_detail__cont">
                                    <p><i class="client_privilege__icon--hq"></i>HQ高品质 全员开启</p>
                                    <p><i class="client_privilege__icon--dts"></i>独家音效 全面升级</p>
                                    <p><i class="client_privilege__icon--skin"></i>轻盈视觉 动态皮肤</p>
                                    <a class="client_privilege__btn">下载体验</a>
                                </div>
                            </div>
                        </li>
                        <li class="top_nave">开放平台</li>
                        <li class="top_nave">VIP</li>
                    </ul>
                    <ul class="header_bottom">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="header_top_search">
                        <div class="search_input"><input type="text" class="search_input__input"
                             placeholder="搜索音乐、MV、歌单、用户" value=""></div>
                        <button class="header_top_search_btn"></button>
                    </div>
                    <div class="search_result"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>